React错误边界恢复策略：智能错误处理

            
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

            

              
                Copy
              
            
          

            
<ErrorBoundary>
  <ComponentA />
</ErrorBoundary>

<ErrorBoundary>
  <ComponentB />
</ErrorBoundary>

            

              
                Copy
              
            
          

            
// Example of a retry mechanism
function retryOperation(operation, maxRetries = 3, delay = 1000) {
  return new Promise((resolve, reject) => {
    operation()
      .then(resolve)
      .catch((error) => {
        if (maxRetries > 0) {
          console.log(`Retrying operation in ${delay}ms...`);
          setTimeout(() => {
            retryOperation(operation, maxRetries - 1, delay * 2)
              .then(resolve)
              .catch(reject);
          }, delay);
        } else {
          reject(error);
        }
      });
  });
}

// Usage with fetch API
retryOperation(() => fetch('/api/data'))
  .then(data => console.log('Data fetched:', data))
  .catch(error => console.error('Failed to fetch data after retries:', error));

            

              
                Copy
              
            
          

            
{isFeatureEnabled ? (
  <ErrorBoundary>
    <FeatureComponent />
  </ErrorBoundary>
) : (
  <FallbackComponent />
)}

            

              
                Copy
              
            
          

            
const withErrorBoundary = (WrappedComponent) => {
  return class WithErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
      return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
      console.error('Error caught by HOC:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        return <p>An error occurred in this component.</p>;
      }
      return <WrappedComponent {...this.props} />; // Pass all props down
    }
  };
};

// Usage
const EnhancedComponent = withErrorBoundary(MyComponent);

            

              
                Copy
              
            
          

            
componentDidCatch(error, errorInfo) {
  if (error instanceof SpecificError) {
    // Handle the specific error
    this.setState({ customErrorMessage: 'A specific error occurred.' });
  } else {
    // Handle other errors
    this.setState({ genericErrorMessage: 'An unexpected error occurred.' });
  }
  logErrorToMyService(error, errorInfo);
}

            

              
                Copy
              
            
          

            
// Example using react-i18next
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <p>{t('error.message')}</p>
  );
}

            

              
                Copy